<template>
  <div class="register-container">
    <div class="register-box">
      <h2>Register</h2>
      <form @submit.prevent="register">
        <input v-model="email" type="email" placeholder="Email" required />
        <input v-model="password" type="password" placeholder="Password" required />
        <button type="submit">Register</button>
      </form>
      <p>Already have an account? <router-link to="/login">Login</router-link></p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    async register() {
      try {
        const response = await axios.post('http://localhost:8000/api/register/', {
          email: this.email,
          password: this.password
        });

        console.log('注册成功:', response.data);

        // 注册成功后跳转到登录页面
        this.$router.push('/login');

      } catch (error) {
        console.error('注册失败:', error);
        alert('注册失败'); // 弹窗提示
      }
    }
  }
};
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color:rgb(213, 207, 215); /* 淡青色背景，增强对比 */
}

.register-box {
  width: 400px;
  height: 500px;
  background: linear-gradient(to bottom right,rgb(206, 115, 186), #fed6e3); /* 青涩风渐变绿/浅绿粉过渡 */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}

.register-box h2 {
  text-align: center;
  margin-bottom: 30px;
  color: rgba(127, 70, 169, 0.9);
  font-weight: bold;
  font-size: 24px;
}

.register-box input {
  width: 100%;
  height: 25px;
  margin-bottom: 20px;
  padding: 8px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  outline: none;
}

.register-box button {
  width: 100%;
  height: 30px;
  background-color:rgba(141, 124, 214, 0.8);
  color:rgb(230, 243, 223);
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.register-box button:hover {
  background-color:rgba(127, 70, 169, 0.9);
}

.register-box p {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: white;
}
</style>